<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

</head>
<body>
    <h1>基本使用</h1>
    <button>get</button>
    <button>post</button>
    <button>put</button>
    <button>delete</button>


    <script>
        const btns = document.querySelectorAll('button')
        //1.基本使用
        // btns[0].onclick = function(){
        //     axios({
        //         method: 'GET',
        //         url: 'http://localhost:3000/posts/2'
        //     }).then(response => {
        //         console.log(response);        
        //     })
        // }
        // btns[1].onclick = function(){
        //     axios({
        //         method: 'POST',
        //         url: 'http://localhost:3000/posts',
        //         data:{
        //             title:'nihao',
        //             author:'赵瑞洪'
        //         }
        //     }).then(response => {
        //         console.log(response);
                
        //     })
        // }
        // btns[2].onclick = function(){
        //     axios({
        //         method: 'PUT',
        //         url: 'http://localhost:3000/posts/39e5',
        //         data:{
        //             title:'nihao',
        //             author:'赵瑞宏'
        //         }
        //     }).then(response => {
        //         console.log(response);
                
        //     })
        // }
        // btns[3].onclick = function(){
        //     axios({
        //         method: 'DELETE',
        //         url: 'http://localhost:3000/posts/39e5',
        //     }).then(response => {
        //         console.log(response);
        //     })
        // }
    
        // //2.创建实例
        // const request = axios.create({
        //     baseURL:'https://localhost:3000',
        //     timeout: 3000
        // })
        // request({
        //     url:'/posts'
        // }).then(response => {
        //     console.log(response);
        // })

        // 3.拦截器
        axios.interceptors.request.use(function(config){
            console.log('请求成功');
            return config;
        },function(error){
            console.log('请求失败');
            return Promise.reject(error)
        })
        axios.interceptors.response.use(function(response){
            console.log('响应成功');
            return response;
        },function(error){
            console.log('响应失败');
            return Promise.reject(error)
        })

        axios({
            method: 'GET',
            url:'http://loaclhost:3000/posts'
        }).then(response => {
            console.log('回调成功');
        }).catch(error => {
            console.log('回调失败');
        })
    </script>
</body>
</html>